<link href="__CDN__/assets/addons/qingdongwms/css/common.css?v={$Think.config.site.version}" rel="stylesheet">

<style type="text/css">
    .btn-list {
        position: fixed;
        right: 40px;
    }
    .div-flex {
        display: flex
    }
    .div-flex .form-group {
        margin-right: 25px;
        text-align: center;
        line-height: 25px;
        margin-bottom: 0;
    }
    .tab-pane {
        border: 1px solid #F6F6F6;
    }
    .i-color {
        font-size: 34px;margin-right: 10px;color: #86C3FF;
    }
    .i-marker {
        font-size: 18px;margin-right: 2px;color: #86C3FF;
    }
    .thumbnail {
        display: flow-root;
        width: max-content;
    }
    .thumbnail img {
        width: 50px;
        float: left;
        padding: 5px;
    }
</style>

<div class="panel panel-default panel-intro">
    <input type="hidden" name="ids" id="ids" value="{$row.id}"/>
    <div class="div-flex">
        <i class="fa fa-address-card i-color"></i>
        <div><b>{$row.title}</b>（{$row.event_type}）
            <p><span class="text-muted">备注:</span>
                <span>{$row.remark}</span></p>
        </div>
        <div class="btn-list">
            {notin name="$row.status" value="2,3"}
            <a class="btn btn-success btn-edit">编辑任务</a>

            <a class="btn btn-danger btn-dialog" data-area=["500px","400px"] data-refresh="true" data-shade="0.3"
               data-url="qingdongwms/event/event/revoke?ids={$row.id}"
               data-title="终止任务" >终止任务</a>
            {/notin}
        </div>
    </div>
    <div class="div-flex" style="margin-top: 20px">
        <div class="form-group">
            <span class="text-muted">计划状态</span>
            <p>{$row.status_text}</p>
        </div>
        <div class="form-group">
            <span class="text-muted">客户</span>
            <p>{$row.customer.name}</p>
        </div>
        <div class="form-group">
            <span class="text-muted">负责人</span>
            <p>{$row.staff.name}</p>
        </div>
        <div class="form-group">
            <span class="text-muted">紧要程度</span>
            <p>{$row.level_text}</p>
        </div>
        <div class="form-group">
            <span class="text-muted">开始时间</span>
            <p>{$row.start_time}</p>
        </div>
        <div class="form-group">
            <span class="text-muted">预计结束时间</span>
            <p>{$row.end_time}</p>
        </div>
        <div class="form-group">
            <span class="text-muted">创建时间</span>
            <p>{$row.createtime}</p>
        </div>
    </div>
    <div>

        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#record" aria-controls="home" role="tab" data-toggle="tab">计划动态</a></li>
            <li role="presentation"><a href="#settings5" aria-controls="profile" role="tab" data-toggle="tab">相关费用</a></li>
            <li role="presentation"><a href="#settings6" aria-controls="profile" role="tab" data-toggle="tab">客户需求</a></li>
        </ul>

        <div class="tab-content" style="overflow-y: scroll;height:565px">
            <div role="tabpanel" class="tab-pane fade active in panel-body form-horizontal" id="record">
                {empty name="records"}
                {else/}
                {foreach name="records" item="val" }
                <div class="div-record">
                    <div class="div-flex">
                        <i class="fa fa-user-circle-o i-color"></i>
                        <div><b>{$val.staff.name}（{$val.staff.post}）</b> <span class="label label-success">{$val.relation_process}</span>
                            <p class="text-muted">{$val.createtime}</p>
                        </div>
                    </div>
                    {if condition="$val.location"}
                    <p class="text-info"><i class="fa fa-map-marker i-marker"></i>签到地点：{$val.location}（距离拜访人：{$val.distance}）</p>
                    {/if}
                    <div class="well">
                        {$val.content}
                        {if condition="$val.file_ids"}
                        <div class="thumbnail">
                            {foreach name="$val.file_ids" item="vf"}
                            <a href="{$vf}" target="_blank"><img data-tips-image src="{$vf}" alt=""></a>
                            {/foreach}
                        </div>
                        {/if}
                    </div>
                </div>
                {/foreach}
                {/empty}
            </div>
            <div role="tabpanel" class="tab-pane fade panel-body" id="settings5">
                    <div class="panel-body">
                        <div id="toolbar_consume" class="toolbar">
                            {:build_toolbar('refresh')}
                            <a class="btn btn-success btn-dialog"
                               data-url="qingdongwms/customer/consume/add?customer_id={$row.customer_id}&relation_id={$row.id}&relation_type=event"
                               data-title="新建费用" data-refresh="true" data-area=["90%","90%"]>新建费用</a>
                        </div>
                        <table id="consume" class="table table-striped table-bordered table-hover table-nowrap"
                               width="100%">

                        </table>
                    </div>

            </div>
            <div role="tabpanel" class="tab-pane fade panel-body" id="settings6">
                    <div class="panel-body">
                        <div id="needs_customer" class="toolbar">
                            {:build_toolbar('refresh')}
                            <a class="btn btn-success btn-dialog"
                               data-url="qingdongwms/event/event/add_needs?event_id={$row.id}"
                               data-title="新建客户需求" data-refresh="true" data-area=["500px","300px"]>新建客户需求</a>
                        </div>
                        <table id="needs_table" class="table table-striped table-bordered table-hover table-nowrap"
                               width="100%">

                        </table>
                    </div>

            </div>

        </div>

    </div>
</div>